<script setup>
import tabBar from "../../pages/comment/tabBar.vue"
</script>

<template>
  <view class="simple-daily-report">
    <!-- 统计条 -->
    <view class="stats-bar">
      <text>{{ tabStats[activeTab] }}</text>
    </view>

    <!-- 搜索框 -->
    <view class="search-box">
      <input type="text" placeholder="请输入姓名/学号模糊查询" v-model="searchValue" />
      <button @click="search">搜索</button>
    </view>

    <!-- Tab 导航 -->
    <view class="tab-bar">
      <view
          v-for="(tab, index) in tabs"
          :key="index"
          class="tab-item"
          :class="{ 'active': activeTab === index }"
          @click="activeTab = index">
        {{ tab }}
      </view>
    </view>

    <!-- 内容区域 -->
    <view class="content">
      <!-- 校外完成 -->
      <view v-if="activeTab === 0" class="list">
        <!-- 给item添加@click事件，传递当前学生信息 -->
        <view
            class="item"
            v-for="(item, idx) in filteredOutsideCompleted"
            :key="idx"
            @click="goToDetail(item)" > <!-- 点击卡片触发跳转 -->

        <view class="avatar">{{ item.name }}</view>
        <view class="info">
          <text>{{ item.name }}</text>
          <text>{{ item.date }}</text>
          <text>{{ item.address }}</text>
        </view>
        <!-- 增加箭头提示“可点击” -->
        <view class="arrow">→</view>
      </view>

    </view>

    <!-- 校外未完成 -->
    <view v-if="activeTab === 1" class="list">
      <view
          class="item"
          v-for="(item, idx) in outsideUncompleted">

      <view class="avatar">{{ item.name }}</view>
      <view class="info">
        <text>{{ item.name }}</text>
        <text>{{ item.date }}</text>
        <text>{{ item.address }}</text>
      </view>
    </view>

  </view>

  <!-- 校内完成 -->
  <view v-if="activeTab === 2" class="list">
    <view
        class="item"
        v-for="(item, idx) in insideCompleted"
        :key="idx"
        @click="goToDetail(item)">  <!-- 同样添加点击事件 -->

    <view class="avatar">{{ item.name }}</view>
    <view class="info">
      <text>{{ item.name }}</text>
      <text>{{ item.date }}</text>
      <text>{{ item.address }}</text>
    </view>
    <view class="arrow">→</view>
  </view>

  </view>

  <!-- 校内未完成 -->
  <view v-if="activeTab === 3" class="list">
    <view
        class="item"
        v-for="(item, idx) in insideUncompleted">


    <view class="avatar">{{ item.name }}</view>
    <view class="info">
      <text>{{ item.name }}</text>
      <text>{{ item.date }}</text>
      <text>{{ item.address }}</text>
    </view>

  </view>

  </view>
  </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 0,
      tabs: ['校外完成', '校外未完成', '校内完成', '校内未完成'],
      tabStats: [
        '今日校外完成每日填报 2 人',
        '今日校外未完成每日填报 1 人',
        '今日校内完成返校健康 1 人',
        '今日校内未完成返校健康 1 人'
      ],
      searchValue: '',
      //  给每个学生添加唯一标识（id），用于详情页定位学生
      outsideCompleted: [
        { id: 123456789, name: '张三', date: '2025-10-1', address: '山西省大同市云岗区' },
        { id: 241639039, name: '李四', date: '2025-10-1', address: '湖南省长沙市' }
      ],
      outsideUncompleted: [
        { id: 323455666, name: '赵刚', date: '2025-10-1', address: '四川省成都' }
      ],
      insideCompleted: [
        { id: 434525566, name: '孙妙', date: '2025-10-1', address: '山西省太原市中北大学' }
      ],
      insideUncompleted: [
        { id: 547954399, name: '林婉', date: '2025-10-1', address: '山西省太原市中北大学' }
      ]
    };
  },
  computed: {
    filteredOutsideCompleted() {
      if (!this.searchValue) {
        return this.outsideCompleted;
      }
      return this.outsideCompleted.filter(item =>
          item.name.includes(this.searchValue)
      );
    }
  },
  methods: {
    search() {
      console.log('搜索内容：', this.searchValue);
    },
    // 跳转详情页的方法
    goToDetail(student) {
      // 通过uni.navigateTo跳转，URL参数携带学生id
      uni.navigateTo({
        // 详情页路径
        url: `/pages/studentDetail/studentDetail?id=${student.id}&name=${student.name}&address=${student.address}`,
        // 跳转失败的容错处理
        fail: (err) => {
          console.error('详情页跳转失败：', err);
          uni.showToast({
            title: '详情页不存在',
            icon: 'none', // 不显示图标
            duration: 1500 // 提示时长
          });
        }
      });
    }
  }
};
</script>

<style scoped>
.simple-daily-report {
  width: 100%;
  background: #fff;
  min-height: 100vh; /* 让页面占满屏幕高度 */
}

.stats-bar {
  background: lemonchiffon;
  color: #f00;
  padding: 10px;
  text-align: center;
  font-weight: bold;
}

.search-box {
  display: flex;
  padding: 10px;
  border-bottom: 1px solid #eee;
}

.search-box input {
  flex: 1;
  border: 1px solid #eee;
  border-radius: 4px;
  padding: 5px;
}

.search-box button {
  margin-left: 10px;
  background: #2f54eb;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 0 15px;
}

.tab-bar {
  display: flex;
  border-bottom: 1px solid #eee;
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 10px;
  cursor: pointer;
}

.tab-item.active {
  color: #2f54eb;
  border-bottom: 2px solid #2f54eb;
}

.list {
  padding: 15px;
}


.item {
  display: flex;
  align-items: center; /* 垂直居中 */
  margin-bottom: 15px;
  padding: 12px;
  border-radius: 8px;
  background-color: #f9f9f9;
  cursor: pointer; /* 鼠标悬浮显示“手”型 */
  transition: background-color 0.2s; /* 背景色过渡动画 */
}

/* 鼠标悬浮时卡片变浅 */
.item:hover {
  background-color: #f0f0f5;
}

.avatar {
  width: 40px;
  height: 40px;
  background: #2f54eb;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
}

.info {
  flex: 1; /* 让信息区域占满剩余宽度 */
  display: flex;
  flex-direction: column;
}

/* 优化文字样式：姓名加粗，其他文字变浅变小 */
.info text:first-child {
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 4px;
}

.info text:not(:first-child) {
  font-size: 12px;
  color: #666;
  margin-bottom: 2px;
}

/* 4. 箭头样式：提示可点击 */
.arrow {
  color: #999;
  font-size: 16px;
  margin-left: 5px;
}

.empty {
  text-align: center;
  color: #999;
  padding: 20px;
}
</style>